import { ButtonConfig, gridSpacing } from '@/store/constant'
import { getShiftList } from '@/api/index'
import { MoreActionButton, ShiftItemCell } from '@/components/index'
import ShiftButton from './ShiftButton'
import MainCard from '@/ui-component/cards/MainCard'
import { Fragment } from 'react'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { DefaultPagination } from '@/store/constant'
dayjs.extend(customParseFormat)

const ShiftList = () => {
  const [params, setParams] = useState({
    size: DefaultPagination.pageSize,
    page: DefaultPagination.page + 1
  })
  const { data, refresh, loading } = useRequest(() => getShiftList(params), {
    cacheKey: `/shift/list_${params.page}`,
    refreshDeps: [params],
    debounceWait: 500
  })

  const { data: list = [], total = 0 } = data ?? {}
  const changePage = (_e: any, page: number) => {
    const newParams = { ...params, page }
    setParams(newParams)
  }
  return (
    <Grid container spacing={gridSpacing}>
      <Grid item sm={6} xs={12} xl={4} sx={{ height: '100%' }}>
        <MainCard title="班次配置" sx={{ minHeight: 500 }} secondary={<ShiftButton refresh={refresh} />}>
          <Stack direction="row-reverse" justifyContent="space-between">
            <Pagination
              sx={{ justifySelf: 'end' }}
              size="small"
              count={Math.ceil(total / params.size)}
              variant="outlined"
              color="secondary"
              onChange={changePage}
            />
            {loading && <CircularProgress size="1.5rem" />}
          </Stack>
          <Box>
            <List dense={true}>
              {list.map((item, index) => {
                return (
                  <Fragment key={index}>
                    <ListItem
                      disablePadding
                      sx={{ paddingBlock: 1 }}
                      secondaryAction={
                        <MoreActionButton
                          menuItems={entries(pick(ButtonConfig, ['edit', 'delete'])).map(
                            ([type, btn]: [string, { label: string; icon: React.ComponentType<any> }]) => {
                              return (
                                <ShiftButton
                                  key={type}
                                  type={type}
                                  refresh={refresh}
                                  record={item}
                                  renderTrigger={(props) => (
                                    <MenuItem {...props}>
                                      <ListItemIcon>
                                        <btn.icon size="1.2rem" />
                                      </ListItemIcon>
                                      <Typography variant="inherit">{btn.label}</Typography>
                                    </MenuItem>
                                  )}
                                />
                              )
                            }
                          )}
                        />
                      }
                    >
                      <ShiftItemCell index={index} item={item} />
                    </ListItem>
                    <Divider />
                  </Fragment>
                )
              })}
            </List>
          </Box>
        </MainCard>
      </Grid>
    </Grid>
  )
}

export default ShiftList
